<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery图片翻转弹出动画特效DEMO演示</title>

<link href="css/expander.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">

<script src="js/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/expander.min.js"></script>
<script>
var index =0;
var timeout= setInterval(function(){
	if (index > 10){
		window.clearInterval(timeout)
	}
	$("article").eq(index).addClass("show");
	index++
},300);

function showFoo(){
	$("#fooId").trigger("expand");
}

$("#expandSettings").on("click", function(){
	if ($("ul.settings").hasClass("open")){
		$("ul.settings").removeClass("open");
	}else{
		$("ul.settings").addClass("open");

	}
});
</script>

</head>
<body>
<br>
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>	
<section class="main">
	<article>
		<div class="imgContainer">
			<h5>效果一</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"default"}'>
		</div>
		<div class="imgContainer">
			<h5>效果二</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"diamond"}'>
			
		</div>
		<div class="imgContainer">
			<h5>效果三</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"turn3d"}'>
		</div>
		<div class="imgContainer">
			<h5>效果四</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"flip3d"}'>
		</div>
		<div class="imgContainer">
			<h5>效果五</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"rotate"}'>
		</div>				
		<div class="imgContainer">
			<h5>效果六</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"fade"}'>
			
		</div>
	</article>
</section>

</body>
</html>


